<template>
  <div>
    <div id="app">
      <div id="home">
        <div class="operator_header">
          <div id="header" class="operatorHeader clearfix" style="background:red">
            <div class="w15 fl text-center">
              <div class="logo"></div>
            </div>
            <div class="w70 fl text-left">
              <h3 class="m120px">摄影小程序后台管理</h3>
            </div>
            <div class="w15 fl text-right">
              <div class="userInfo">
                <div class="userAvatar"></div>
                <div class="userName">
                  <span class="fz16px"></span>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <ul class="operatorList" style="display:none">
                  <li class="operatorItem">
                    <a href="" style="display:block">
                      <i class="el-icon-s-custom"></i>
                      <span to="/Login">门户首页</span>
                    </a>
                  </li>
                  <li class="operatorItem">
                    <i class="el-icon-switch-button"></i>
                    <span>退出登录</span>
                  </li>
                </ul>
                <div class="skinPeeler">
                  <i class="skinLogo"></i>
                  <ul class="skinPeelerList">
                    <li class="skinPeelerItem">
                      <span>默认主题</span>
                    </li>
                    <li class="skinPeelerItem">
                      <span>默认主题</span>
                    </li>
                    <li class="skinPeelerItem">
                      <span>默认主题</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-tabs :tab-position="tabPosition" style="height: 200px;">
          <el-tab-pane label="首页内容">首页内容</el-tab-pane>
          <el-tab-pane label="订单管理">订单管理</el-tab-pane>
          <el-tab-pane label="客户预约">客户预约</el-tab-pane>
          <el-tab-pane label="用户管理">用户管理</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tabPosition: "left"
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped>

.operator_head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.operatorHeader{
    line-height: 80px;
    color: #fff;
    background: #6a6969;
}
.clearfix{
  zoom: 1;
}
.w15{
  width: 15%!important;
}
.fl{
  float: left;
}
.text-center{
  text-align: center!important;
}
.logo{
    width: 100%;
    height: 36px;
    margin-top: 22px;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}
.w70{
  width: 70%!important;
}
.fl{
  float: left;
}
.text-left{
 text-align: left!important;
}
.ml20px {
    margin-left: 20px!important;
}
h3{
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.text-left {
    text-align: left!important;
}
.w15{
  width: 15%!important;
}
.fl{
  float: left;
}
.text-right{
  text-align: right!important;
}
.clearfix:after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}
.userInfo{
    padding-right: 30px;
    position: relative;
    cursor: pointer;
}
.userAvatar{
    height: 40px;
    width: 40px;
    background: url(./img/web.db426e9.jpg) no-repeat 50%;
    background-size: cover;
    border-radius: 50%;
    float: left;
    margin-top: 20px;
}
* {
    margin: 0;
    padding: 0;
}
.userName{
    float: right;
    position: relative;
    display: inline-block;
}
.fz16px {
    font-size: 16px!important;
}
.userInfo .operatorList[data-v-534172ad] {
    width: 150px;
    background: #fff;
    line-height: 40px;
    color: #000;
    text-align: center;
    position: absolute;
    top: 65px;
    right: 30px;
    z-index: 1000;
    box-shadow: 2px 2px 8px 2px rgba(0,0,0,.22);
    border-radius: 5px;
    display: none;
}
.userInfo{
    padding-right: 30px;
    position: relative;
    cursor: pointer;
}
.userInfo .operatorList .operatorItem{
    border-bottom: .5px solid hsla(0,0%,73.3%,.8);
    margin: 0 16px;
    box-sizing: border-box;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
  color:inherit
}
.skinPeeler[data-v-534172ad] {
    float: right;
    color: #fff;
    font-size: 28px;
    height: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    margin-right: 20px;
}
.skinPeeler .skinLogo[data-v-534172ad] {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) no-repeat 50%;
    background-size: cover;
    display: inline-block;
    width: 30px;
    height: 20px;
    position: absolute;
    top: 29px;
    left: -26px;
}
.skinPeelerList[data-v-534172ad] {
    width: 150px;
    background: #fff;
    line-height: 40px;
    color: #000;
    text-align: center;
    position: absolute;
    top: 65px;
    right: -65px;
    z-index: 1000;
    box-shadow: 2px 2px 8px 2px rgba(0,0,0,.22);
    border-radius: 5px;
    display: none;
}
.skinPeelerList .skinPeelerItem[data-v-534172ad] {
    border-bottom: .5px solid hsla(0,0%,73.3%,.8);
    margin: 0 16px;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
